<template>
  <div>
    <div class="inputDiv">
      <el-form :inline="true">
        <el-form-item label="host">
          <el-input class="input-width" v-model="connect.host" placeholder="请输入host" clearable></el-input>
        </el-form-item>
        <el-form-item label="port">
          <el-input class="input-width" v-model="connect.port" placeholder="请输入port" clearable></el-input>
        </el-form-item>
        <el-form-item label="username">
          <el-input class="input-width" v-model="connect.username" placeholder="请输入username" clearable></el-input>
        </el-form-item>
        <el-form-item label="password">
          <el-input class="input-width" v-model="connect.password" placeholder="请输入password" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" plain @click="connectSSH">连接</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="terminal" style="margin:0;height:100%;width:auto" clearable></div>
  </div>
</template>
<script>
import { Terminal } from "xterm";
import "xterm/css/xterm.css";
import "xterm/lib/xterm.js";
import WSSHClient from "../js/webssh"

export default {
  data(){
    return{
      options:{
        cols: 150,
        rows: 42,
        cursorBlink: true, // 光标闪烁
        cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'
        scrollback: 800, //回滚
        tabStopWidth: 8, //制表宽度
        screenKeys: true
      },
      connect:{
        operate:'connect',
        host: '124.71.146.254',//IP
        port: '22',//端口号
        username: 'root',//用户名
        password: 'wangchuang1692374100@'//密码*/
      },
      term:null,
      client:null,
      connectStatus:false
    }
  },
  mounted() {
    this.initTerm()
  },
  methods:{
    // 初始化窗口
    initTerm(){
      this.term = new Terminal(this.options);
      this.client = new WSSHClient();
      this.term.open(document.getElementById('terminal'));
      this.term.write('未连接');
    },
    // 开启连接
    connectSSH(){
      if(!this.connectStatus){
        this.openTerminal()
      }
    },
    openTerminal(){
      this.connectStatus=true
      let options=this.connect;
      this.term.onData((data)=> {
        //键盘输入时的回调函数
        this.client.sendClientData(data);
      });
      //在页面上显示连接中...
      this.term.write('\r\nConnecting...\n');
      //执行连接操作
      this.client.connect({
        onError: (error)=> {
          //连接失败回调
          this.term.write('Error: ' + error + '\r\n');
        },
        onConnect: ()=> {
          //连接成功回调
          this.client.sendInitData(options);
        },
        onClose: ()=> {
          //连接关闭回调
          this.term.write("\r\nconnection closed");
        },
        onData: (data)=> {
          //收到数据时回调
          this.term.write(data);
        }
      });
    }
  }
}
</script>
<style scoped>
</style>
